<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.0.0.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/text.css"/>
		<style type="text/css">
			div{width: 1920px;height:1200px ;position: absolute;}
			.hide{display: none;}
			.circle{width: 20px;height: 20px;border-radius: 10px;background-color: midnightblue;list-style: none;float: left;margin-left: 10px;}
			ul{position: absolute;top: 1100px;left: 580px;}
		</style>
	</head>
	<body style="margin: 0;padding: 0;">
		<div>
			<img src="img/2a1e13d96a.jpg"/>
			<img src="img/542803a66c.jpg" class="hide"/>
			<img src="img/89f0f1c3c6.jpg" class="hide"/>
			<img src="img/9205cc8d2f.jpg" class="hide"/>
			
			<ul>
				<li class="circle"></li>
				<li class="circle"></li>
				<li class="circle"></li>
				<li class="circle"></li>
			</ul>
			<script type="text/javascript">
				$(function(){
					$('.circle').mousemove(function(){
						var dddd =$('.circle').index(this);
						$("img").hide();
						$("img").eq(dddd).show()
						
					})
					
				})
			</script>
			
		</div>
		
		
		
		
	</body>
</html>
